<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>有奖答题平台</title>
    <!-- ICON -->
    <link href="/frame/images/meatball.ico" type="image/ico" rel="shortcut icon">
    <!-- CSS -->
    <link rel="stylesheet" href="/lib/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/lib/layuiadmin/css/admin.css" media="all" />
</head>
<body layadmin-themealias="default">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-md2">
                    <!--<form class="layui-form" style="float: left;">-->
                    <div class="layui-inline">
                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="addBtn" title="新增">
                            <i class="layui-icon">&#xe61f;</i> 新增
                        </button>
                    </div>
                    <!--                    <div class="layui-inline">-->
                    <!--                        <button class="layui-btn layui-btn-warm" lay-submit lay-filter="enableJobBtn" title="开启任务">-->
                    <!--                            <i class="layui-icon">&#xe61f;</i>开启任务-->
                    <!--                        </button>-->
                    <!--                    </div>-->
                    <!--</form>-->
                </div>
                <div class="layui-col-md10">
                    <form class="layui-form" id="queryForm" style="float: right;">

                        <button class="layui-btn" lay-submit lay-filter="query">
                            <i class="layui-icon">&#xe615;</i> 查询
                        </button>
                        <!--<button class="layui-btn" lay-submit lay-filter="crontimebtn2">-->
                        <!--<i class="layui-icon">&#xe615;</i> cron-->
                        <!--</button>-->
                    </form>
                </div>
            </div>
            <hr class="layui-bg-gray">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <!-- 表格 -->
                    <table id="table" lay-filter="table"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 操作 -->
<script type="text/html" id="operationBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!-- 详情 -->
<script type="text/html" id="view">
    <table class="layui-table" style="width: 680px; margin: 10px 10px 0px 10px;">
        <tr>
            <td class="table-td-title">所属租户</td>
            <td width="465">{{d.tenantid}}</td>
        </tr>
        <tr>
            <td class="table-td-title">版本号</td>
            <td width="465">{{d.versionnum}}</td>
        </tr>
        <tr>
            <td class="table-td-title">主要内容</td>
            <td width="465">{{d.memo}}</td>
        </tr>
        <tr>
            <td class="table-td-title">apk地址</td>
            <td width="465">{{d.apkurl}}</td>
        </tr>
        <!--    <tr>-->
        <!--        <td class="table-td-title">触发类型</td>-->
        <!--        <td width="465">{{d.triggertime}}</td>-->
        <!--    </tr>-->
        <tr>
            <td class="table-td-title">更新时间</td>
            <td width="465">{{d.createtime}}</td>
        </tr>

    </table>

    <br>
</script>

<!--新增-->

<script type="text/html" id="addForm">
    <form class="layui-form layui-form-pane">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">

                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">APK文件</label>
                            <div class="layui-input-block">
                                <input type="text" name="apkurl" autocomplete="off" placeholder="Apk安装包文件路径" class="layui-input" readonly="readonly" style="width:455px;float: left">
                                <button type="button" class="layui-btn" id="uploadbtn" style="float: left;text-align: center;width: 90px">
                                    <i class="layui-icon">&#xe67c;</i>上传
                                </button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属租户</label>
                            <div class="layui-input-block">
<!--                                <input type="text" name="tenantid" autocomplete="off" placeholder="请输入租户信息" class="layui-input" lay-verify="required">-->
                                <select name="tenantid" id="tenantid">
                                    <option value="">请选择</option>
                                    <option value="">测试</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">版本号</label>
                            <div class="layui-input-block">
                                <input type="text" name="versionnum" autocomplete="off" placeholder="请输入版本号" class="layui-input" lay-verify="required">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">主要内容</label>
                            <div class="layui-input-block">
                                <input type="text" name="memo" autocomplete="off" placeholder="请输入内容" class="layui-input">
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">apk地址</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="text" name="apkurl" autocomplete="off" placeholder="请输入apk地址" class="layui-input" lay-verify="required">-->
<!--                                </button>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">更新时间</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="text" class="layui-input" id="test">-->
<!--                            </div>-->
<!--                        </div>-->
                        <div class="hidden-attribute">
                            <button class="layui-btn submit" lay-submit="" lay-filter="add">新增</button>
                            <button class="layui-btn reset" type="reset">重置</button>
                        </div>
                </div>
                <!--<input class="hidden-attribute" name="avatar">-->
            </div>
        </div>
        </div>
    </form>
</script>

<!--编辑-->

<script type="text/html" id="editForm">
    <form class="layui-form layui-form-pane">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">

                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属租户</label>
                            <div class="layui-input-block">
                                <input type="text" name="tenantid" autocomplete="off" placeholder="请选择所属租户" class="layui-input"  value="{{d.tenantid}}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">版本号</label>
                            <div class="layui-input-block">
                                <input type="text" name="versionnum" autocomplete="off" placeholder="请输入版本号" class="layui-input"  value="{{d.versionnum}}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">主要内容</label>
                            <div class="layui-input-block">
                                <input type="text" name="memo" autocomplete="off" placeholder="请输入主要内容" class="layui-input" value="{{d.memo}}">
                            </div>
                        </div>
<!--                        <div class="layui-form-item">-->
<!--                            <label class="layui-form-label">apk地址</label>-->
<!--                            <div class="layui-input-block">-->
<!--                                <input type="text" name="apkurl" autocomplete="off" placeholder="请输入触发时间" class="layui-input"  style="width:400px;float: left" value="{{d.apkurl}}">-->
<!--                            </div>-->
<!--                        </div>-->

                        <div class="hidden-attribute">
                            <button class="layui-btn submit" lay-submit="" lay-filter="update">提交</button>
                            <button class="layui-btn reset" type="reset">重置</button>
                        </div>

                </div>
                <input class="hidden-attribute" name="id" value="{{d.id}}" title="ID">
            </div>
        </div>
        </div>
    </form>
</script>


<!-- JavaScript -->
<script type="text/javascript" src="/lib/layuiadmin/layui/layui.js"></script>
<!-- javascirpt -->
<script th:inline="javascript">
    var allRoles = [[${allRoles}]];
</script>
<script type="text/javascript" th:inline="none">
    layui.config({
        base: '/lib/layuiadmin/' //静态资源所在路径
}).extend({
        index: 'lib/index' //主入口模块
}).use(['index','upload'],function() {
        var table = layui.table,
            form = layui.form,
            laydate = layui.laydate,
            upload = layui.upload,
            element = layui.element,
            laytpl = layui.laytpl,
            $ = layui.jquery,
            $addBtn = $('#addBtn'),
            $queryForm = $('#queryForm'),
            layerIndex = 1;

        // 绘制表格
        table.render({
// 		id: 'table',
            elem: '#table',
            url: '/system/Apk/table',
            page: true, // 开始分页
            // cellMinWidth: 80, // 定义全局最小宽度
            request: {
                pageName: 'offset'
            },
            response: {
                statusCode: 10000
                // countName: 'total', //数据总数的字段名称，默认：count
                // dataName: 'list' //数据列表的字段名称，默认：data
            },
            cols: [[
                {type: 'numbers', title: '序号',fixed: 'left'},
                {field:'tenantid', title: '所属租户',width:300},
                {field:'versionnum', title: '版本号', width:280},
                {field:'memo', title: '主要内容', align:'center', templet: '#memo',width:400},
                {field:'apkurl', title: 'apk地址',width:230},
                {field:'createtime', title: '更新时间', align:'center', templet: '#createtime',width:200},
                {fixed: 'right', align:'center', width: 180, toolbar: '#operationBar'}
            ]]
        });

        //监听工具条
        table.on('tool(table)', function(obj) {
            var data = obj.data,
                $this = $(this),
                getView = view.innerHTML,
                getEdit = editForm.innerHTML;
            if(obj.event === 'detail') {
                $.get('/system/Apk/' + data.id, function(res) {
                    if(res.code == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        laytpl(getView).render(res, function(html) {
                            popupWin($this.text(), html, false);
                        })
                    }
                })
            } else if(obj.event === 'del') {
                layer.confirm('真的删除行么', {icon: 3}, function(index) {
                    operate('DELETE', {'id': data.id}, false, obj);
                    layer.close(index);
                });
            } else if(obj.event === 'edit') {
                $.get('/system/Apk/' + data.id, function(res) {
                    if(res.status == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        laytpl(getEdit).render(res, function(html) {
                            popupWin($this.text(), html, true);
                        });
                        rendering();
                    }
                })
            }
        });


        // 新增
        form.on('submit(addBtn)', function(data) {
            var $this = $(this);
            laytpl(addForm.innerHTML).render(data, function(html) {
                popupWin($this.attr('title'), html, true);
            });
            rendering();
            return false;
        });

        // 新增用户
        form.on('submit(add)', function(data) {
            var $form = $(this).parents('form');
            operate('POST', data.field, true);
            return false;
        });

        // 更新
        form.on('submit(update)', function(data) {
            var $form = $(this).parents('form');
            var roles = [];
            $form.find('input[tenantid=roles]:checked').each(function() {
                roles.push($(this).val());
            });
            data.field.roles = roles;
            operate('PUT', data.field, true);
            return false;
        });


        // 用户操作
        // ajaxType 请求类型
        // data 参数
        // refresh 是否刷新
        // 删除操作时传入的当前行对象
        function operate(ajaxType, data, refresh, delRow) {
            var url = '/system/Apk/';
            if(ajaxType == 'DELETE') {
                url = '/system/Apk/' + data.id;
            }
            $.ajax({
                url: url,
                type: ajaxType,
                async: true,
                data: data,
                success: function(res) {
                    if(res.code == 10000) {
                        layer.close(layerIndex);
                        if(refresh) {
                            table.reload('table');
                        } else if(ajaxType == 'DELETE') {
                            delRow.del();
                        }
                        if(data.resetPwd) {
                            layer.alert(res.message, {icon: 6});
                        } else {
                            layer.msg(res.message, {icon: 1});
                        }
                    }  else if(res.code == 403) {
                        layer.msg(res.message, {icon: 4});
                    } else {
                        layer.msg(res.message, {icon: 5});
                    }
                }
            })
        }
//渲染弹框
        function popupWin(title, content, showBtn) {
            layerIndex = layer.open({
                id: 'meatball',
                type: 1, //Page层类型
                area: '700px', //['700px', '480'],
                maxWidth: 1000,
                maxHeight: 800,
                title: title,
                skin: 'layui-layer-rim', //加上边框
                shade: 0.1, //遮罩透明度
                // maxmin: true, //允许全屏最小化
                anim: 0, //0-6的动画形式，-1不开启
                scrollbar: false, //禁用滚动
                content: content,
                btn: showBtn ? ['<i class="layui-icon layui-icon-ok"></i> 提交', '<i class="layui-icon layui-icon-refresh-1"></i> 重置'] : '',
                yes: function(index, layero) {
                    layero.find('form .submit').trigger('click');
                    return false;
                },
                btn2: function(index, layero) {
                    layero.find('form .reset').trigger('click');
                    return false;
                }
            });
            // layer.full(layerIndex);
        }

        // 动态渲染控件
        function rendering() {
            var $form = $('form');
            // 渲染select
            form.render('select');
            // 重新渲染多选框
            form.render('checkbox');
            // // 初始化日期
            // laydate.render({
            // 	elem: '.birthday'

            // laydate.render({
            //     elem: '#test'
            //     ,type: 'datetime'
            // });


            $("#crontimebtn").click(function(event){
                event.stopPropagation();
                popupCrontEditWin();
            });

            //执行实例
            var uploadInst = upload.render({
                elem: '#uploadbtn' //绑定元素
                ,url: '/system/Apk/uploadapk' //上传接口
                ,accept: 'file'
                ,acceptMime: 'file/apk'
                ,exts: 'apk'
                ,field: 'file'
                ,done: function(res){
                    //上传完毕回调
                    // console.log(res);
                    if(res.code=='10000'){
                        layer.msg(res.message, {icon: 1});
                        var url = res.data.apkurl;
                        $form.find('input[name=apkurl]').val(url);

                    }
                }
                ,error: function(res){
                    layer.msg('上传失败！', {icon: 2});
                }
            });


            // 检查项目添加到下拉框中
            $.ajax({
                url: '/system/Apk/tenant',
                dataType: 'json',
                type: 'get',
                success: function (data) {
                    $.each(data, function (index, item) {
                        $('#tenantid').append(new Option(item.Name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render("select");

// 重新渲染 固定写法
                }
            })






            };
})
</script>
</body>
</html>
